<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入分类相关仓库
import useCategoryStore from '@/store/modules/category'

const categoryStore = useCategoryStore()
//分类挂载时请求一级分类
onMounted(() => {
    categoryStore.getCategory1()
})
//一级分类收集收据发生改变时
const changeC2 = (selectedId: number | string) => {
    //清空c2c3Id和c3列表，c2列表因为c1ID变了，所以c2列表也会变，不需要清空
    categoryStore.c2Id = ''
    categoryStore.c3Id = ''
    categoryStore.category3 = []
    categoryStore.getCategory2(selectedId)
}
//二级分类收集收据发生改变时
const changeC3 = (selectedId: number | string) => {
    //清空c3Id,c3列表因为c2ID变了，所以c3列表也会变，不需要清空
    categoryStore.c3Id = ''
    categoryStore.getCategory3(selectedId)
}
//接收父组件传递的场景判断，对分类收集框禁用
defineProps({
    show: {
        type: Number,
        // required: true,  // 必须传值
        // default:1  // 或设置默认值
    }
})
</script>
<template>
    <el-card class="attr-card-one">
        <el-form :inline="true">
            <el-form-item label="一级分类">
                <el-select  v-model="categoryStore.c1Id" @change="changeC2" placeholder="请选择">
                    <el-option v-for="(c1, index) in categoryStore.category1" :key="index" :label="c1.name"
                        :value="c1.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select  v-model="categoryStore.c2Id" @change="changeC3" placeholder="请选择">
                    <el-option v-for="(c2, index) in categoryStore.category2" :key="index" :label="c2.name"
                        :value="c2.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select  v-model="categoryStore.c3Id" placeholder="请选择">
                    <el-option v-for="(c3, index) in categoryStore.category3" :key="index" :label="c3.name"
                        :value="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<style>
.el-select {
    width: 240px
}
</style>